Gutenberg Components: ColorPicker

Picking colors for various parts of a WordPress site is a popular thing. Many plugins and themes have such options so users can customize the appearance of their site.

This Gutenberg Component can be found in the repository.

ColorPicker Properties

There are not a lot of properties for the ColorPicker since it is a quite simple component which does one thing only; picking a color 🙂

• color – the color that we provide as the default/initial color
• className – if provided, it will add the CSS class to the element alongside other classes
• disableAlpha – this does not need a value at all. Just put it as a property and it will disable the alpha color picker
• onChangeComplete – this is the function that you will use to handle the color change. You can then applying to other components of your block or anywhere else.

The function provided in onChangeComplete property will receive an object as a color which will have this attributes:

• color – Hex value of the color
• hex – transparent or #hexColor
• hsl
• hsv
• rgb,
• source,
• oldHue – reference to the previous color hue

Default Classes

The default classes that you can use to change the component design are:

• components-color-picker,
• is-alpha-disabled – applied if the property disableAlpha is provided,
• is-alpha-enabled – applied if the property disableAlpha is not provided.

Using the ColorPicker Component

Since this is a Gutenberg Component, it will be available on a page with the Gutenberg editor by using:

const { ColorPicker } = wp.components

Let’s consider wrapping the ColorPicker Component with our own dumb component. Maybe we have a naming convention that we want to follow and for example, onChange is used everything. By using that, the property onChangeComplete is not following that naming convention.

We created a wrapper, a function, that returns the same ColorPicker components. We then accept the property onChange and use that in the place of onChangeComplete.

How Gutenberg uses the ColorPicker Component

Since this component is a simple one and it’s usage is pretty straightforward, you don’t really have to search on how Gutenberg has implemented it. But it is always nice to see how the developers who created this component, use it in their own app.

I’ve found out that ColorPicker is being used by the component ColorPalette. Since the code is a bit longer here, I will paste only the part where ColorPicker is used. For the whole code of it, you can check the repo.

Conclusion

This is a component that I think it will be used a lot by other blocks. I can even see it being used in separate apps that utilize the Gutenberg packages for creating UIs.